<template>
  <div class="query">
    <a-range-picker
      v-model:value="value"
      :disabled-date="disabledDate"
      @change="onChange"
      format="YYYY-MM-DD"
      @openChange="onOpenChange"
      @calendarChange="onCalendarChange"
    />
    <a-button @click="query" class="query_btn">搜索</a-button>
    <a-button @click="reset" class="reset_btn">重置</a-button>
  </div>
</template>
<script setup>
import { ref, inject } from 'vue';
import moment from 'moment';
const EventBus = inject('EventBus');
const today = new Date();
const yesterday = moment(new Date(today.setDate(today.getDate() - 1)));
const dates = ref([]);
const value = ref([yesterday, yesterday]);

const disabledDate = current => {
  if (!dates.value || dates.value.length === 0) {
    return false;
  }

  const diffDate = current.diff(dates.value[0], 'days');
  return Math.abs(diffDate) > 2;
};

const onOpenChange = open => {
  if (open) {
    dates.value = [];
  }
};

const onChange = val => {
  value.value = val;
};

const onCalendarChange = val => {
  dates.value = val;
};

const query = () => {
  const startTime = value.value[0].format('YYYY-MM-DD') + ' 00:00:00';
  const endTime = value.value[1].format('YYYY-MM-DD') + ' 23:59:59';
  EventBus.emit('timequery', {
    startTime, endTime
  });
};

const reset = () => {
  value.value = [yesterday, yesterday];
  query();
};

</script>
<style lang="less" scoped>
.query {
  display: flex;
  gap: 0.625rem;
}
.reset_btn {
  width: 4.5rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(11, 60, 100, 0.5);
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #0b3c64;
  cursor: pointer;
}
.query_btn {
  width: 4.5rem;
  background: linear-gradient(
    180deg,
    rgba(109, 147, 255, 0.8) 0%,
    rgba(40, 73, 166, 0.8) 49%,
    rgba(18, 49, 130, 0.8) 100%
  );
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #0b3c64;
  color: white;
  cursor: pointer;
}
/deep/ .ant-calendar-picker-input {
  background-color: rgba(11, 60, 100, 0.5);
}
/deep/ .ant-input {
  border: 1px solid #0b3c64;
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 0.75rem;
  font-size: 0.875rem;
}

/deep/ .ant-calendar-range-picker-separator {
  color: rgba(255, 255, 255, 0.85);
}

/deep/ .ant-calendar-picker-clear {
  color: rgba(255, 255, 255, 0.85);
  background-color: transparent;
}
/deep/ .ant-btn {
  padding: 0 0.875rem;
  font-size: 0.875rem;
}

/deep/ .ant-calendar-picker {
  width: 20rem;
}
</style>
